<template>
  <div class="view-container">
    <div class="view-content">
      <el-image
        class="image"
        cross-origin="anonymous"
        fit="fill"
        :src="widget.src"
        :style="{
          'border-radius': widget.borderRaius + 'px',
        }"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { useEleStore } from '@/store/modules/coms'
  const props = defineProps<{
    index: number
  }>()
  const Store = useEleStore()
  const widget = computed(() => {
    return Store.getWidgets[props.index]
  })
</script>

<style lang="scss" scoped>
  .view-container {
    width: 100%;
    height: 100%;

    .view-content {
      width: 100%;
      height: 100%;
      word-break: break-all;
      white-space: pre-line;

      .image {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
